본문으로 건너뛰기

JSX의 조건부 렌더링과 반복 처리

조건부 렌더링​

React에서 조건부 렌더링은 특정 조건에 따라 다른 컴포넌트를 렌더링하는 방법을 의미합니다. 이는 JavaScript의 조건문을 활용해 매우 쉽게 구현할 수 있습니다.

if 문 사용​

가장 기본적인 방법으로 if 문을 사용할 수 있습니다. 아래 예제에서는 isLoggedIn 상태에 따라 다른 메시지를 렌더링합니다.

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

조건부 연산자 사용​

삼항 연산자를 사용하면 더욱 간결하게 조건부 렌더링을 할 수 있습니다.

function Greeting(props) {
  return (
    <div>
      {props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
    </div>
  );
}

논리 연산자 && 사용​

조건이 참일 때만 렌더링할 경우, 논리 연산자 &&를 사용할 수 있습니다.

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 && (
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      )}
    </div>
  );
}

반복 처리​

React에서 리스트를 렌더링할 때는 JavaScript의 배열 메서드를 사용하여 매우 간단하게 구현할 수 있습니다.

map() 메서드 사용​

map() 메서드를 사용하여 배열의 각 요소를 변환하고 JSX 요소로 렌더링합니다. 리스트를 렌더링할 때는 고유한 key를 설정해주는 것이 중요합니다.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

컴포넌트 내에서 map() 사용​

리스트를 렌더링하는 부분을 컴포넌트 내부에서 직접 사용할 수도 있습니다.

function NumberList(props) {
  return (
    <ul>
      {props.numbers.map((number) =>
        <li key={number.toString()}>
          {number}
        </li>
      )}
    </ul>
  );
}

key의 중요성​

React는 key를 통해 각 항목을 고유하게 식별합니다. key는 각 요소가 고유하다는 것을 보장할 수 있는 값이어야 합니다. 리스트 항목의 key가 변경되면 React는 해당 항목을 새로 생성하거나 제거합니다.

더 알아보기​

  • 조건부 렌더링: 조건문을 활용한 렌더링 방법과 다양한 사례
  • 리스트와 key: key를 설정하는 다양한 방법과 그 중요성
  • 배열 메서드: map, filter, reduce 등을 활용한 리스트 처리 기법

내용 요약과 다음 주제​

JSX의 조건부 렌더링과 반복 처리에서는 조건문을 활용한 다양한 렌더링 방법과 배열 메서드를 사용한 리스트 렌더링 방법을 학습했습니다. 다음 주제인 State 소개와 좋은 State 이름에서는 상태 관리의 기본 개념과 적절한 상태 이름 짓기에 대해 살펴보겠습니다.